<template>
	<view class="login-page">
		<zero-custom-bar title="找回密码" :effect='false' :fixedHolder='true' :singleIcon="true" backgroundColor='#FFF'>
			<view slot='left'></view>
		</zero-custom-bar>
		<view class="login-box">
			<view class="title-text">用户名：</view>
			<uni-easyinput v-model="phoneNum" type="number" :trim="true" primaryColor="#00C250" :maxlength="11" placeholder="请输入手机号"></uni-easyinput>
			<view class="title-text">验证码：</view>
			<uni-easyinput v-model="code" type="number" :trim="true" clearSize="0" primaryColor="#00C250" :maxlength="11" placeholder="请输入验证码">
				<view slot='right' style="padding-right: 10rpx;">
					<text v-if="isGetCode" class="code-text" @click="getCode">获取验证码</text>
					<view style="display: flex;" v-else>
						<uni-countdown @timeup="timeupEvent" :showDay="false"
						color= "#00C250" :fontSize='15' :showHour="false" :showMinute="false" :second="59" ></uni-countdown>
						<text class="code-text">s</text>
					</view>
				</view>
			</uni-easyinput>
			<view class="title-text">新密码：</view>
			<uni-easyinput v-model="newPwd" type="number" :trim="true" primaryColor="#00C250" :maxlength="11" placeholder="请输入新密码"></uni-easyinput>
		</view>
		<view :class="phoneNum !=='' && code !==''?'is-login':''" class="login-btn ">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNum:'',
				newPwd:'',
				code:'',
				isGetCode:true
			};
		},
		methods:{
			// 获取验证码
			getCode(){
				this.isGetCode = false
			},
			// 倒计时结束
			timeupEvent(){
				this.isGetCode = true
			},
			// 获取手机号
			decryptPhoneNumber(e) {
				if(e.detail.errMsg === "getPhoneNumber:ok"){
					this.savePhone(e.detail.code)
				}
			},
			// 保存手机号
			savePhone(phoneCode){
				const data = {
					code:phoneCode,
					appid:'wx0edf385aee5ae55b'
				}
				this.$request({
					method: 'post',
					url: '/app/member/user/getPhoneNumber',
					data,
					loading: false,
					isEncrypt: false
				}).then(res => {
					uni.navigateBack()
				})
			}
		}
	}
</script>

<style lang="scss">
  .login-page{
	  height: 100vh;
	  background: #FFF;
	  padding: 40rpx;
	  box-sizing: border-box;
	  
	  .login-title{
		  font-weight: bold;
		  font-size: 48rpx;
		  color: #333333;
	  }
	  
	  .login-box{
		  .is-input-border{
			  border: none !important;
			  border-bottom: 1px solid #EEE !important;
			  border-radius: 0 !important;
		  }
		  
		  .uni-easyinput__content-input{
			    padding-left: 0 !important;
				font-size: 32rpx;
		  }
		  
		  .uni-easyinput__placeholder-class{
			  font-size: 32rpx !important;
		  }
		  
		  .uni-easyinput{
			  margin-top: 50rpx;
		  }
		  
		  .code-text{
			  font-size: 30rpx;
			  color: #00C250;
			  font-size: 30rpx;
		  }
	  }
	  
	  .login-btn{
		  background: #00C250;
		  border-radius: 45rpx;
		  opacity: 0.5;
		  font-size: 32rpx;
		  color: #FFFFFF;
		  padding: 30rpx;
		  text-align: center;
		  margin-top: 100rpx;
	  }
	  
	  .is-login{
		   opacity: 1;
	  }
	  
	  .title-text{
	  		  font-size: 28rpx;
	  		  margin-top: 60rpx;
	  }
  }
</style>
